<!--
 * @Author: 宋杰
 * @Date: 2020-12-28 17:53:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-18 10:38:10
 * @Description: 一家十一口(猜一字) 游客首页
-->
<template>
  <div>
    <div class="head">
      <span class="navbar-brand">
        <img src="../../../static/img/logo.png" />
      </span>
      <div class="wenzi">
        <span @click="guanliyuan">管理员入口</span>
        <span style="margin-left: 25px" @click="jigou">机构入口</span>
      </div>
    </div>
    <div class="divBox">
      <!-- 机构信息 -->
      <div class="div2">
        <div class="topBox2">机构信息</div>
        <el-button type="primary" class="sousuoBox" @click="back">
          返 回
        </el-button>
        <!-- 遍历的信息展示 -->
        <div class="conBox2">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in jigouList" :key="index" :span="8">
              <div class="grid-content bg-purple">
                <span>{{ item.name }}</span
                ><span class="fenhao">:</span><span>{{ item.text }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 机构项目信息一栏 -->
      <div class="div3">
        <!-- 搜索模块 -->
        <div class="topBox3">
          <div class="topBox22">机构项目信息一栏</div>
          <div class="topBox33">
            <el-select
              v-model="jiGouXiangMuvalue"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="sousuoBox">
              <i class="el-icon-search"></i>
              <span>查找</span>
            </el-button>
          </div>
        </div>

        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in jiGouXiangMuList"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox3_1">
              <span>{{ item.fenshu }}</span
              >分
            </div>
            <div class="conBox3_3">
              <div>{{ item.jigou }}</div>
              <div>{{ item.name }}</div>
            </div>
            <div class="conBox3_2">
              <div>创建时间</div>
              <div>{{ item.time }}</div>
            </div>
            <div class="conBox3_2">
              <div>培训类型</div>
              <div>{{ item.leixin }}</div>
            </div>
            <div class="conBox3_2">
              <div>教务人员</div>
              <div>{{ item.renyuan }}</div>
            </div>
            <div class="conBox3_2">
              <div>评价时间</div>
              <div>{{ item.kaikeshijian }}</div>
            </div>
            <!-- 详情 -->
            <el-button
              type="primary"
              plain
              size="mini"
              @click="centerDialogVisible2 = true"
              round
              >评价</el-button
            >
          </div>
        </div>

        <!-- 更多页 -->
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="jiGouXiangMuPage"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 机构项目信息一栏end -->

      <!-- 机构评价一栏 -->
      <div class="div3 div4">
        <div class="topBox3">
          <div class="topBox22">机构评价一栏</div>
          <div class="topBox33">
            <el-button
              type="primary"
              plain
              size="mini"
              round
              @click="centerDialogVisible2 = true"
              >评价机构服务</el-button
            >
            <!-- <el-button
              type="primary"
              plain
              size="mini"
              round
              @click="centerDialogVisible = true"
              >身份验证</el-button
            > -->
          </div>
          <!-- 弹窗 评价机构服务-->
          <el-dialog
            :visible.sync="centerDialogVisible"
            center
            class="eldialog"
          >
            <div class="eldialog_top">对机构/项目评价</div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="evaluateText"
            >
            </el-input>
            <div class="pinjiaShowbox">
              <div>
                <img
                  @click="pinjiaShow(2)"
                  :src="
                    pinjiaShow2 == false
                      ? require('../../../static/img/kulian1.png')
                      : require('../../../static/img/kulian2.png')
                  "
                  alt=""
                />
                <div :class="pinjiaShow2 == false ? 'grayColor' : 'blueColor'">
                  差评
                </div>
              </div>

              <div>
                <img
                  @click="pinjiaShow(1)"
                  :src="
                    pinjiaShow1 == false
                      ? require('../../../static/img/xiaolian1.png')
                      : require('../../../static/img/xiaolian2.png')
                  "
                  alt=""
                />
                <div :class="pinjiaShow1 == false ? 'grayColor' : 'blueColor'">
                  好评
                </div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="centerDialogVisible = false"
                >提 交</el-button
              >
            </span>
          </el-dialog>

          <!-- 弹窗 身份验证 -->
          <el-dialog
            :visible.sync="centerDialogVisible2"
            center
            class="eldialog"
          >
            <div class="eldialog_top">学员身份验证</div>
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item label="姓名">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="身份证">
                <el-input v-model="formLabelAlign.IDcard"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="formLabelAlign.phone"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                plain
                type="primary"
                @click="centerDialogVisible2 = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="shenfen">提 交</el-button>
            </span>
          </el-dialog>
        </div>

        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in evaluateList"
            :key="index"
          >
            <div class="conBox4_1">
              <div>{{ item.name[0] }}</div>
              <div>学员</div>
            </div>
            <div class="conBox3_3">
              <div>{{ item.text }}</div>
            </div>
          </div>
        </div>

        <!-- 更多页 -->
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="jiGouPingJiaPage"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 机构评价一栏end -->
    </div>
    <!-- 底部开始 -->
    <div class="footers">
      <div class="footer-center">
        <img src="../../../static/img/footrr.png" />
        <p style="margin-top: 10px">
          版权所有：©江苏省建设教育协会 &#160; | &#160;
          地址:南京市南通路118号茂悦港5号楼8楼 &#12288;| &#12288; 邮编:210036
          &#12288;|&#12288;苏ICP备17047788号
        </p>
      </div>
      <!-- <div class="footer-right">
        <div style="float: left">
          <p>网站服务</p>
          <p>返回首页</p>
          <p>行业服务</p>
        </div>
        <div style="float: right; margin-left: 10px">
          <p>加入会员</p>
          <p>远程教育</p>
          <p>开展工作</p>
        </div>
      </div> -->
      <div class="tup">
        <img src="../../../static/img/tuceng.png" />
      </div>
    </div>
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      // activeName: "first"
      // 机构信息 ========================
      jigouList: [
        { id: "1", name: "机构名", text: "新东方培训机构" },
        { id: "2", name: "法人名", text: "王有才" },
        { id: "3", name: "办学许可证显示有/无", text: "有" },
        { id: "4", name: "收费许可证显示有/无", text: "有" },
        { id: "5", name: "教师队伍人数", text: "20人" },
        { id: "6", name: "办公面积", text: "300平方米" },
        { id: "7", name: "教学面积", text: "1000平方米" },
        { id: "8", name: "经营内容", text: "培训、教学" },
        { id: "9", name: "详细地址", text: "江苏省南京市秦淮区鼓楼" }
      ],
      // 机构信息 end---------------------

      // 机构项目信息一栏 ================
      // 搜索
      options: [],
      jiGouXiangMuvalue: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ],
      // 列表
      jiGouXiangMuList: [
        {
          id: "0",
          fenshu: "60",
          jigou: "语文培训班",
          name: "李嘉",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "赵钱",
          kaikeshijian: "2020.4.5"
        },
        {
          id: "1",
          fenshu: "60",
          jigou: "数学培训班",
          name: "王媛媛",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "宋元",
          kaikeshijian: "2020.4.5"
        },
        {
          id: "2",
          fenshu: "60",
          jigou: "英语培训班",
          name: "赵文卓",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "李富",
          kaikeshijian: "2020.4.5"
        },
        {
          id: "3",
          fenshu: "80",
          jigou: "计算机培训班",
          name: "郭晶晶",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "马龙",
          kaikeshijian: "2020.4.5"
        },
        {
          id: "4",
          fenshu: "90",
          jigou: "钢琴培训班",
          name: "郭靖",
          time: "2020.3.3",
          leixin: "视频",
          renyuan: "于可可",
          kaikeshijian: "2020.4.5"
        }
      ],
      // 分页
      jiGouXiangMuPage: 5,
      // 机构项目信息一栏 end ------------

      // 机构评价一栏 ====================
      // 列表
      evaluateList: [
        {
          id: "1",
          name: "张2",
          text:
            "学校有专人每天都会咨询我们的学习进度，感觉受到重视，教学质量优秀"
        },
        { id: "1", name: "宋3", text: "这个学校的老师不好，不负责任" },
        {
          id: "1",
          name: "张",
          text: "学校的老师讲解的知识通俗易懂，鼓励我们进行提问"
        },
        {
          id: "1",
          name: "王2",
          text: "学校给了我很多知识，很感谢在学校学习的日子"
        },
        {
          id: "1",
          name: "张",
          text: "学校的学习氛围十分浓郁，同学之间交流十分的活泼"
        }
      ],
      jiGouPingJiaPage: 4, //分页
      centerDialogVisible: false, //弹窗 评价机构服务
      evaluateText: "", //输入框
      pinjiaShow1: false, //好评颜色切换
      pinjiaShow2: false, //差评颜色变换

      //身份验证
      centerDialogVisible2: false, //弹窗 身份验证
      labelPosition: "right",
      formLabelAlign: {
        name: "", // 姓名
        IDcard: "", // 身份证
        phone: "" //手机号
      }
      // 机构评价一栏end -----------------
    };
  },

  methods: {
    // 弹窗 身份验证 "提交"
    shenfen() {
      this.centerDialogVisible = true;
      this.centerDialogVisible2 = false;
    },
    // 转跳到 "管理员登录页"
    guanliyuan() {
      this.$router.push({ name: "login" });
    },
    // 转跳到 "机构登录页"
    jigou() {
      this.$router.push({ name: "institutions" });
    },

    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    // 机构项目信息一栏 搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 分页====================
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 分页 end------------------
    // 好评、差评
    pinjiaShow(val) {
      if (val == 1) {
        console.log(val);
        this.pinjiaShow1 = !this.pinjiaShow1;
        this.pinjiaShow2 = false;
      } else {
        this.pinjiaShow2 = !this.pinjiaShow2;
        this.pinjiaShow1 = false;
      }
    },

    // 返回按钮
    back() {
      this.$router.go(-1); //返回上一层
    }
    // yanz() {
    //   this.$confirm("先进行身份证认证?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       // this.$message({
    //       //   type: 'success',
    //       //   message: '!'
    //       // });
    //     })
    //     .catch(() => {
    //       // this.$message({
    //       //   type: 'info',
    //       //   message: ''
    //       // });
    //     });
    // },
  },

  mounted() {
    // 机构项目信息一栏 搜索
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  }
};
</script>
<style scoped>
.divBox {
  width: 100%;
  /* min-height: 100%; */
  padding: 0 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
}
/* div1 */
.div1 {
  background: #fff;
  width: 100%;
  min-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.topBox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #2276c3;
  padding: 0 10px;
  display: flex;
  align-items: center;
}
/* 图片 */
.topBox > :nth-child(1) {
  width: 24px;
  height: 24px;
  background: #f5f6fa;
  margin-right: 10px;
}
/* top内容 */
.topBox > :nth-child(2) {
  font-size: 24px;
  line-height: 24px;
}
/* con内容 */
.conBox {
  padding: 10px 10px;
}
/* con图片 */
.conBox > :nth-child(2) {
  width: 24px;
  height: 24px;
  background: #f5f6fa;
  margin-right: 10px;
  display: inline;
}

.div2 {
  background: #fff;
  width: 100%;
  min-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  margin-top: 71px;
  /* display: flex;
  flex-direction:column; */
}
.div2 > .sousuoBox {
  float: right;
  margin: 2px 10px;
}
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h1-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
.topBox22 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h22-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}
.topBox33 {
  float: right;
  line-height: 48px;
  /* margin-right: 10px; */
}
.grid-content {
  margin-bottom: 20px;
}
.conBox2 {
  padding: 0 10px;
  margin-top: 55px;
  padding-top: 3px;
}
.pinxin {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
/* 分号 */
.fenhao {
  margin: 0 6px;
}
/* 申报 */
.shenbao {
  height: 24px;
  display: flex;
  align-items: center;
}
/* .shenbao > :nth-child(1) {
  display: inline-block; 
  line-height: 24px;
} */

.div3 {
  background: #fff;
  width: 100%;
  min-height: 220px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.topBox3 {
  /* border: 1px solid #000; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.sousuoBox {
  margin-left: 10px;
}
.conBoxList {
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 {
  flex: 1.5;
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.orangecolor {
  border: 1px solid rgb(240, 147, 40) !important;
  color: rgb(240, 147, 40) !important;
}
.redcolor {
  border: 1px solid rgb(240, 69, 17) !important;
  color: rgb(240, 69, 17) !important;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
/* 分页 */
.fenye {
  border-top: 1px solid rgb(233, 232, 232);
  height: 40px;
  display: flex;
  align-items: center;
}
.fenye > :nth-child(1) {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.fenye > :nth-child(1) > :nth-child(1) {
  position: absolute;
  left: 10px;
}

/* 机构评价一栏 */
.conBox4_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none !important;
  width: 50px;
  height: 50px;
  border: 1px solid rgb(79, 131, 243);
  border-radius: 4px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #2276c3;
}
.conBox4_1 > :nth-child(1) {
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
}
.conBox4_1 > :nth-child(2) {
  line-height: 20px;
}

/* 机构评价一栏end */

/* 学员机构项目评价一览 */
.div4 {
  margin-bottom: 150px;
}
/* 学员机构项目评价一览end */

/* 弹窗 */
.eldialog >>> .el-dialog {
  position: relative;
  min-width: 500px;
  min-height: 300px;
  border-radius: 6px;
  padding: 10px;
}
.eldialog >>> .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #eee;
}
.eldialog >>> .el-dialog__headerbtn {
  top: 15px;
}
.eldialog_top {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  line-height: 30px;
}
.eldialog >>> .el-textarea__inner {
  max-height: 140px !important;
}
.pinjiaShowbox {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 10px;
}
.pinjiaShowbox > div {
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 15px;
}

.pinjiaShowbox > :nth-child(2) > img {
  width: 30px;
  height: 30px;
}
.pinjiaShowbox > :nth-child(1) > img {
  margin-top: -3px;
  width: 35px;
  height: 35px;
}
.blueColor {
  color: #609dd4;
}
.grayColor {
  color: #bfbfbf;
}
.head {
  position: fixed;
  top: 0;
  background-color: #fff;
  text-decoration: none;
  width: 100%;
  z-index: 999;
  height: 52px;
}
.navbar-brand img {
  color: #f5f7fa;
  margin-top: -10px;
}
.wenzi {
  color: #1b2531;
  font-size: 14px;
  right: 0;
  position: absolute;
  left: 87%;
  line-height: 48px;
  cursor: pointer;
}
/* 底部 */
.footers {
  position: fixed;
  bottom: 0;
  background-color: #093b69;
  text-decoration: none;
  width: 100%;
  z-index: 999;
  height: 100px;
}
.footer-center {
  float: left;
  margin: 0;
  color: #fff;
  /* text-align: center; */
  text-decoration: none;
  padding: 1% 0;
  /* line-height: 30px; */
  font-size: 12px;
  margin-left: 40px;
}
.footer-right {
  float: right;
  /* margin: 0; */
  color: #fff;
  /* text-align: center; */
  /* text-decoration: none; */
  /* padding: 1% 0; */
  /* line-height: 18px; */
  font-size: 12px;
  margin-right: 191px;
  /* margin-top: 6px; */
  margin-top: 21px;
}
.tup {
  position: absolute;
  right: 0px;
  margin-top: 16px;
  margin-right: 66px;
}
</style>
